<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<div>
    <h3>margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。</h3>
    <ul>
        <li>auto 依赖浏览器设置</li>
        <li>length 设置一个固定的边距 px em pt</li>
        <li>% 定义一个百分比的边距</li>
    </ul>
    <h3>也可以设置单边外边距</h3>
    <ul>
        <li style="margin-left:180px;border:1px groove">设置左边距margin-left:180px</li>
        <li style="margin-top:50px;border:1px groove">设置上边距margin-top:50px</li>
        <li style="margin-bottom:20px;border:1px groove">设置下边距margin-bottom:20px</li>
        <li style="margin-right:50px;border:1px groove">设置右边距margin-right:50px</li>
    </ul>
    <h3>边距简写margin:上 右  下 左</h3>
    <p style="margin:10px 300px 12px 5px;border:1px groove">margin:10px 300px 12px 5px</p>
    <p>参照物</p>
</div>

</html>